import React, { useState, useEffect, useRef } from 'react'
import { inject, observer } from 'mobx-react'
import { useClickAway } from 'ahooks'

import MoreInfo from '../more-info/more-info'
import RightMenu from '../right-menu'
import { focusScreen } from '../../util/index'
import video from '../../store/video'
import DiffScreens from './diff-screens'
import useSubs from '../../hooks/useSubs'
import common from '../../store/common'

const SplitScreens = () => {
  const { event$ } = common

  const ref = useRef()

  useEffect(() => {
    const { screenArr } = video
    if (screenArr.length > 0) {
      const { id } = screenArr[0]
      focusScreen(id)
      video.setCurScreenId(id)
    }
  }, [video.screenArr])

  useClickAway(() => {
    event$.emit({ action: 'showMoreInfo', val: false })
  }, ref)

  function onMouseDown(e) {
    if (e.button === 0) {
      event$.emit({ action: 'onMouseDown', val: e })
    }
  }

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <div ref={ref}>
        <MoreInfo />
      </div>
      <RightMenu />
      <DiffScreens />
    </div>
  )
}

export default inject('store')(observer(SplitScreens))
